<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>抢枪抢！</title>
    <!-- Vue 3 -->
    <script src="/js/vue.global.prod.js"></script>
    <!-- Element Plus 样式 -->
    <link rel="stylesheet" href="/css/element.css" />
    <!-- Element Plus -->
    <script src="/js/element-plus.js"></script>
    <script src="/js/zh-cn.min.js"></script>
    <script src="/js/dayjs.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>
        body {
            padding: 20px;
        }
        .form-show {
            width: 100%;
            margin-top: 15px;
        }
        .user-token{
            margin-top: 10px;
        }
    </style>
</head>

<body>
<div id="app">
    <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="handleSelect"
    >
        <el-menu-item :index="'1'">抢购中心</el-menu-item>
        <el-menu-item :index="'2'">抢购记录</el-menu-item>
    </el-menu>

    <div v-show="activeIndex === '1'">
        <el-input style="margin-top: 15px" v-model="form.user" placeholder="请输入用户鉴权信息"></el-input>
        <el-input style="margin-top: 15px" v-model="form.userPhone" placeholder="请输入用户手机号"></el-input>
        <el-button type="primary" @click="confirmUserInfo" :disabled="ticketShow" class="user-token">确认</el-button>
        <el-button type="danger" @click="clickUserInfo" :disabled="!ticketShow" class="user-token">清除</el-button>
    </div>

    <el-form v-show="ticketShow" :model="form" label-width="auto" class="form-show">
        <el-form-item label="景区大门">
            <el-select
                    v-model="form.prodId"
                    placeholder="选择景区大门"
                    style="max-height: 200px;overflow: auto"
            >
                <el-option
                        v-for="(door,index) in doorArr"
                        :key="index"
                        :label="door.name"
                        :value="door.prodId"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="景区票日期">
            <el-date-picker
                    v-model="form.date"
                    placeholder="请选择景区票日期"
                    style="width: 100%"
                    @change="dateCheckChange"
            />
        </el-form-item>
        <el-form-item label="景区票时间段">
            <el-select
                    v-model="form.timeList"
                    multiple
                    placeholder="选择景区票时间段"
                    style="max-height: 200px;overflow: auto"
            >
                <el-option
                        v-for="time in timeArr"
                        :key="time.timeRangeId"
                        :label="time.beginTime + ' - ' + time.endTime"
                        :value="time.timeRangeId + '-' + time.beginTime + '-' + time.endTime"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="联系人电话">
            <el-input v-model="form.callUser" placeholder="联系人电话"></el-input>
        </el-form-item>
        <el-form-item label="出游人">
            <el-select
                    v-model="checkedLeaveUserId"
                    multiple
                    placeholder="选择出游人"
                    style="max-height: 200px;overflow: auto"
            >
                <el-option
                        v-for="leaveUser in newLeaveUserForm"
                        :key="leaveUser.recordId"
                        :label="leaveUser.name"
                        :value="leaveUser.recordId"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="程序开始抢购时间">
            <el-date-picker
                    v-model="form.appStartBuyTime"
                    type="datetime"
                    placeholder="设置程序抢购时间"
            />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="confirmTicketBuy">
                开始抢购！
            </el-button>
        </el-form-item>
    </el-form>
</div>

<script>
    const listTimeApi = '/ticket/list-time-range-by-date';
    const listUserApi = '/ticket/list-user';
    const ticketSubmitApi = '/ticket/submit';
    const { createApp, ref,reactive  } = Vue;

    const app = createApp({
        setup() {
            const doorArr = [
                {
                    'name':'东门-成人票（148）',
                    'prodId':'P2024123100000019407'
                },
                {
                    'name': '西门-成人票（112）',
                    'prodId': 'P2024123100000023301'
                },
                {
                    'name': '东门-学生票（48）',
                    'prodId': 'P2024053000000025701'
                }
            ]
            // 抢购-所有已创建用户
            const newLeaveUserForm = ref([])
            const checkedLeaveUserId = ref([])
            // 菜单选择索引
            const activeIndex = ref('1')
            const handleSelect = (key, keyPath) => {
                activeIndex.value = key
                if(activeIndex.value === '1'){
                    ticketShow.value = false
                } else if(activeIndex.value === '2'){
                    recordShow.value = false
                }



            }
            // 菜单选择触发事件
            const handleSelectMenu = (key, keyPath) => {
                console.log(key, keyPath)
            }

            // 是否展示抢购菜单
            const ticketShow = ref(false)
            // 是否展示记录菜单
            const recordShow = ref(false)

            // 确认用户鉴权信息
            const confirmUserInfo = () => {
                ticketShow.value = true
                // 拉取当前用户已创建的所有联系人
                axios
                    .post(listUserApi,{user: form.user})
                    .then(res => {
                        newLeaveUserForm.value = res.data.data.data
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }

            // 清除鉴权信息
            const clickUserInfo = () => {
                ticketShow.value = false
                form.user = ''
                form.userPhone = ''
            }

            // 时间段选择
            const timeArr = ref([])

            // 抢购-表单数据
            const form = reactive({
                user: '',
                userPhone: '',
                date: '',
                dateStr: '',
                timeList: [],
                callUser: '',
                leaveUser: [],
                appStartBuyTime:''
            })

            // 抢购-日期选择
            const dateCheckChange = newValue => {
                // 使用 dayjs 格式化日期
                const formattedDate = dayjs(newValue).format('YYYY-MM-DD');
                axios
                    .post(listTimeApi,{
                        user: form.user,
                        dateStr: formattedDate,
                        prodId: form.prodId
                    })
                    .then(res => {
                        timeArr.value = res.data.data.data.dayTimeLimitRuleCoList
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }

            // 确认抢购
            const confirmTicketBuy = ()  => {
                form.leaveUser = newLeaveUserForm.value.filter(user => checkedLeaveUserId.value.includes(user.recordId))
                form.dateStr = dayjs(form.date).format('YYYY-MM-DD');
                axios
                    .post(ticketSubmitApi,form)
                    .then(res => {
                        ElementPlus.ElNotification({
                            title: '提示',
                            message: '提交成功！请在抢购记录中关注结果！',
                            type: 'success',
                            duration: 2000
                        })
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }

            return { handleSelect,checkedLeaveUserId,confirmTicketBuy,newLeaveUserForm,ticketShow,recordShow,activeIndex,handleSelectMenu,form,dateCheckChange,confirmUserInfo,clickUserInfo,timeArr,doorArr };
        },

    });

    // 使用 Element Plus 插件
    app.use(ElementPlus,{
        locale: ElementPlusLocaleZhCn,
    });

    app.mount('#app');
</script>
</body>
</html>
